import React from 'react'
import {Image, Text, View} from '@tarojs/components'
import './GridLayer.scss'

export interface GridLayerItem {
  iconfont: string,
  desc?: string
  url: string
}

type Props = {
  grids: GridLayerItem[],
  onclick: (url: string) => void
}

const GridLayer: React.FC<Props> = React.memo(({grids, onclick}) => {
  return <View className='grid_layer'>
    {
      grids.map(item => <View className='grid_layer_wrap'>
          <View className='grid_layer_wrap_box' onClick={() => onclick(item.url)}>
            <Image className='grid_layer_wrap_icon' src={item.iconfont} />
          </View>
          {
            item.desc ? <Text className='grid_layer_wrap_desc'>{item.desc}</Text> : <></>
          }
        </View>
      )
    }
  </View>
})

export default GridLayer
